<template>
    <div class="register">
        <!-- 导航区域 -->
        <z-header>注册</z-header>
        <section class="page">
            <div class="register-page">
                <div class="register-wrap">
                    <div class="register-text">
                        <input @mouseenter="focusText" @mouseleave="blurText" v-model="username" type="text" class="register-username" placeholder="请输入用户名" />
                        <i class="iconfont icon-close" data-close="username" v-show="!usernameClose" @click="clearText"></i>
                    </div>
                    <div class="register-text">
                        <input @mouseenter="focusText" @mouseleave="blurText" v-model="password" type="password" class="register-password" placeholder="请输入密码" />
                        <i class="iconfont icon-close" data-close="password" v-show="!passwordClose" @click="clearText"></i>
                    </div>
                    <div class="register-text">
                        <input @mouseenter="focusText" @mouseleave="blurText" v-model="email" type="text" class="register-email" placeholder="请输入邮箱" />
                        <i class="iconfont icon-close" data-close="email" v-show="!emailClose" @click="clearText"></i>
                    </div>
                    <div class="register-text">
                        <input @mouseenter="focusText" @mouseleave="blurText" v-model="phone" type="text" class="register-phone" placeholder="请输入手机号" />
                        <i class="iconfont icon-close" data-close="phone" v-show="!phoneClose" @click="clearText"></i>
                    </div>
                </div>
            </div>
            <div class="register-error">{{errMsg}}</div>
            <button class="register-button" @click="registerNext" :class="{'active' : removeSpace(username)&&removeSpace(password)&&removeSpace(email)&&removeSpace(phone)}">下 一 步</button>
            <!-- 密保部分 -->
            <transition name="slide">
                <div class="set-security" v-show="securityShow">
                    <div class="set-security-head">
                        <i class="iconfont icon-left" @click="closeSecurity"></i>
                        <span>设置密保问题</span>
                    </div>
                    <p>设置的密保问题和答案将用于忘记密码时重置密码!</p>
                    <div class="register-page">
                        <div class="register-wrap">
                            <div class="register-text">
                                <input @mouseenter="focusText" @mouseleave="blurText" v-model="question" type="text" class="register-question" placeholder="请输入密保问题" />
                                <i class="iconfont icon-close" data-close="question" v-show="!questionClose" @click="clearText"></i>
                            </div>
                            <div class="register-text">
                                <input @mouseenter="focusText" @mouseleave="blurText" v-model="answer" type="password" class="register-answer" placeholder="请输入密保答案" />
                                <i class="iconfont icon-close" data-close="answer" v-show="!answerClose" @click="clearText"></i>
                            </div>
                        </div>
                    </div>
                    <div class="register-error">{{errMsg}}</div>
                    <button class="register-button next" @click="registerSubmit" :class="{'active' : removeSpace(question)&&removeSpace(answer)}">立 即 注 册</button>
                </div>
            </transition>
        </section>
    </div>
</template>
<script>
import zHeader from '@/components/z-header.vue';
import {register} from '@/http/index';
import {formVerify} from '@/common/js/util';
export default {
    components: {
        zHeader
    },
    data() {
        return {
            username: '',
            password: '',
            email: '',
            phone: '',
            question: '',
            answer: '',
            errMsg: '',
            usernameClose: true,
            passwordClose: true,
            emailClose: true,
            phoneClose: true,
            questionClose: true,
            answerClose: true,
            securityShow: false
        }
    },
    methods: {
        focusText(e) {
            this.judgeText(e, false)
        },
        blurText(e) {
            this.judgeText(e, true)
        },
        judgeText(event, boolean) {
            let $className = event.currentTarget.className
            switch ($className) {
                case 'register-username':
                    this.usernameClose = boolean
                    break
                case 'register-password':
                    this.passwordClose = boolean
                    break
                case 'register-email':
                    this.emailClose = boolean
                    break
                case 'register-phone':
                    this.phoneClose = boolean
                    break
                case 'register-question':
                    this.questionClose = boolean
                    break
                case 'register-answer':
                    this.answerClose = boolean
                    break
            }
        },
        clearText(e) {
            let $close = e.currentTarget.getAttribute('data-close')
            this[$close] = ''
        },
        //下一步
        registerNext() {
          let params={
              username:this.username,
              password:this.password,
              phone:this.phone,
              email:this.email,
          }
          this.errMsg=formVerify(params);
          if(this.errMsg==''){
                //  显示密保设置
                this.securityShow = true
          }
          
        },
        closeSecurity() {
            this.securityShow = false
        },
        removeSpace(value) {
            return value
            // return removeSpace(value)
        },
        //注册
        registerSubmit() {
            if (!this.question.trim()  || !this.answer.trim()){
                    this.errMsg = '请填写密保问题和答案'
                    return
                }
                const params = {
                    username: this.username,
                    password: this.password,
                    phone: this.phone,
                    email: this.email,
                    question: this.question,
                    answer: this.answer
                }
                register(params).then(res => {
                    if (res.status == 0) {
                        this.$router.push('/login')
                    } else {
                        this.$toast(res.msg)
                        this.errMsg = res.msg
                    }
                })
        }
    },  
}
</script>

<style lang="scss" scoped>
// 公共样式
@import '../../common/style/mixin';
// 单独样式
@import '../../css/register';
// 单独样式
@import '../../css/z-header';
</style>